<template>
  <a-modal
    :title="'Excel批量导入'"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="Excel文件">
          <a-upload
            name="file"
            :multiple="true"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            :headers="headers"
            @change="handleChange"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              请选择Excel文件
            </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item label="供应商">
          <a-select v-decorator="['type', { initialValue: '1' }]" placeholder="请选择" >
            <a-select-option value="1">[1]小米【陈建】</a-select-option>
            <a-select-option value="2">[2]苹果黄老板</a-select-option>
            <a-select-option value="3">[4]华为旗舰店</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="采购渠道">
          <a-select v-decorator="['idcard', { initialValue: '1' }]" placeholder="请选择" >
            <a-select-option value="1">无</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="商品名">
          <a-radio-group v-decorator="['product', { initialValue: '1' }]" placeholder="请选择" >
            <a-radio :style="radioStyle" :value="1">不自动新增商品名</a-radio>
            <a-radio :style="radioStyle" :value="2">自动新增商品名(谨慎使用)</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="入库日期">
          <a-date-picker
            v-decorator="['date', { initialValue: '' }]" />
        </a-form-item>
        <a-form-item label="二次入库">
          <a-radio-group v-decorator="['isSecond', { initialValue: '1' }]" placeholder="请选择" >
            <a-radio :style="radioStyle" :value="0">不允许二次入库</a-radio>
            <a-radio :style="radioStyle" :value="1">允许二次入库</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
  
  <script>
  import pick from 'lodash.pick'
  // 表单字段
  const fields = ['description', 'id']
  
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data () {
      this.formLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13 }
        }
      }
      return {
      fileList:[],
      radioStyle:{
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      headers: {
        authorization: 'authorization-text',
      },
   
        form: this.$form.createForm(this)
      }
    },
    created () {
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
  
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        this.model && this.form.setFieldsValue(pick(this.model, fields))
      })
    },
    methods:{
      handleChange (info)  {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList)
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`)
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`)
      }
    }
    }
  }
  </script>